<!DOCTYPE html>
<html lang="en" class="no-js" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" layout:decorator="layout">
<head>
<title>广告列表管理</title>

</head>
<body>
<div layout:fragment="content">
	<div class="row">
		<div class="col-md-12">
			<div class="btn-group pull-right">
				<a href="index.html" th:href="@{/advertisement/adsList/index/}" id="sample_editable_1_new" class="btn green">返回<i class="fa fa-arrow-circle-o-left"></i></a>
			</div>
		</div>
	</div>

	
	<div class="row">
		<div class="col-md-12">
			<div class="form">
				<form role="form"  id="form_advertiseListEdit" th:action="@{/advertisement/adsList/save}" th:object="${advertiseInfo}" method="post" class="form-horizontal" enctype="multipart/form-data">
					<h4 class="form-section">添加广告</h4>
					 <input type="hidden" th:field="*{id}" />
					<div class="form-body">
						
						<div class="form-group" th:class="${#fields.hasErrors('advertiseName')}? 'form-group has-error' : 'form-group'">
							<label class="control-label col-md-3">广告名称<span class="required" aria-required="true">* </span></label>							
							<div class="col-md-4">
								<input type="text" class="form-control"  id="advertiseName" name="advertiseName" placeholder="广告名称" th:field="*{advertiseName}"/>
								<span class="help-block" th:if="${#fields.hasErrors('advertiseName')}" th:errors="*{advertiseName}">广告名称不能为空</span>
							</div>
						</div>		
						
						<div class="form-group" th:class="${#fields.hasErrors('mediaType')}? 'form-group has-error' : 'form-group'" >
				 			<label class="control-label col-md-3" for="belongPage">媒介类型 <span class="required" aria-required="true">* </span></label>	
				 			<div class="col-md-4">
					 			<select th:field="*{mediaType}" name = "mediaType" id="mediaType" style="width:150px;"  th:remove="none" class="form-control">
					                	<option value="">媒介类型 </option>
					                	<option value="IMAGE">图片</option>           	
					            </select>
				            </div>
				 		</div>
						
						<div class="form-group">
							<label class="control-label col-md-3">广告位名称 <span class="required" aria-required="true">* </span></label>
							<div class="col-md-4">
					            <select id="selt_adPositionName" name="selt_adPositionName"  th:field="*{adPositionId}" th:remove="all-but-first" class="form-control">
					               
					                <option th:each="eachValue : ${adPositionNames}" th:value="${eachValue.id}" th:text="${eachValue.adPositionName}">
					                </option>
					              
					            </select>	
					            <span class="help-block" th:if="${#fields.hasErrors('adPositionId')}" th:errors="adPositionId">必须选择广告位</span>												
							</div>
						</div>							
							
						<div class="form-group" th:class="${#fields.hasErrors('sortOrder')}? 'form-group has-error' : 'form-group'">
							<label class="control-label col-md-3">排序<span class="required" aria-required="true"></span></label>
							<div class="col-md-4">
								<input type="text"   id="sortOrder" name="sortOrder" class="form-control" placeholder="显示顺序" th:field="*{sortOrder}"  />
								<!-- <span class="help-block" th:if="${#fields.hasErrors('sortOrder')}" th:errors="*{sortOrder}">必须填写显示顺序</span> -->
							</div>
						</div>
						
						<div class="form-group" th:class="${#fields.hasErrors('startDate')}? 'form-group has-error' : 'form-group'">
                            <label class="control-label col-md-3">开始时间<span class="required" aria-required="true">* </span></label>
                            <div class="col-md-4">
                                <input onBlur="checkDate();" id="text_startDate" th:field="*{startDate}" class="form-control" type="text"></input>
                                <span class="help-block" th:if="${#fields.hasErrors('startDate')}" th:errors="*{startDate}">请输入开始时间</span>
                            </div>
						</div>
						
						<div class="form-group" th:class="${#fields.hasErrors('endDate')}? 'form-group has-error' : 'form-group'">
						    <label class="control-label col-md-3">结束时间<span class="required" aria-required="true">* </span></label>
							<div class="col-md-4">
								<input onBlur="checkDate();" id="text_endDate" th:field="*{endDate}" data-format="yyyy-MM-dd hh:mm:ss" class="form-control" type="text"></input>
								<span class="help-block" th:if="${#fields.hasErrors('endDate')}" th:errors="*{endDate}">请输入结束时间</span>
							</div>
						</div>
						
						<div class="form-group" th:class="${#fields.hasErrors('advertiseLink')}? 'form-group has-error' : 'form-group'">
							<label class="control-label col-md-3">广告链接<span class="required" aria-required="true">* </span></label>
							<div class="col-md-4">
								<input type="text"   id="advertiseLink" name="advertiseLink" class="form-control" placeholder="广告链接" th:field="*{advertiseLink}" />
								<span class="help-block" th:if="${#fields.hasErrors('advertiseLink')}" th:errors="*{advertiseLink}">广告链接不能为空</span>
							</div>
						</div>
						
						 <div class="form-group">
 						    <label class="control-label col-md-3">上传广告图片<span class="required" aria-required="true">* </span></label>
							<div class="col-md-4">
								<input type="file" onchange="fileChange(this);" class="form-control" name="uploadfile"  id="uploadfile"/>		
								
							</div>
							<div class="col-md-4">		 <!--  onFocus = "getFocus();"   onKeyUp="checkLen(this,10);" -->					 
							    <input type="text" onBlur="chenckUrl();"  th:length="3"  placeholder="或输入图片网址 http://(/xxx/)" class="form-control" name="advertiseImageUrl" id="advertiseImageUrl"  th:field="*{advertiseImageUrl}" />
						    </div>
						 </div>		 
						
						<div class="form-group" >
							<label class="control-label col-md-3">是否开启<span class="required" aria-required="true">*</span></label>
							<div class="col-md-4">
								<div class="radio-list">
									<label class="radio-inline"><span><input type="radio" name="isShow"  id="optionsRadios4" value="1"  checked="checked"  th:field="*{displayed}" /></span>是</label>
									<label class="radio-inline"><span><input type="radio" name="isShow" id="optionsRadios5" value="0"    th:field="*{displayed}" /></span> 否</label>
								</div>						
							</div>
						</div>		
					
						
						<div class="form-group">
							<label class="control-label col-md-3">广告描述</label>
							<div class="col-md-4">
								<textarea id="textarea_content" rows="4" type="text"
									class="form-control" placeholder="描述内容" th:field="*{description}"></textarea>
							</div>
						</div>
						 
					</div>
						
					<div class="form-actions fluid">
						<div class="col-md-offset-3 col-md-9">
							<button type="submit" name="btn_submit" id="btn_submit" class="btn blue">提交</button>
							
 						</div>
					</div>
				</form>		
			</div>
		</div>
	</div>
</div>	
 
</body>
</html>

<script th:inline="javascript">
	/*<![CDATA[*/
	
	$("#text_startDate").click(function(){
		WdatePicker({startDate:'%y-%M-01 00:00:00',dateFmt:'yyyy-MM-dd HH:mm:ss',alwaysUseStartDate:true,readOnly:true});
	}).focus(function () {
        WdatePicker({startDate:'%y-%M-01 00:00:00',dateFmt:'yyyy-MM-dd HH:mm:ss',alwaysUseStartDate:true,readOnly:true});
    });
	$("#text_endDate").click(function(){
		WdatePicker({startDate:'%y-%M-01 00:00:00',dateFmt:'yyyy-MM-dd HH:mm:ss',alwaysUseStartDate:true,readOnly:true});
	}).focus(function () {
        WdatePicker({startDate:'%y-%M-01 00:00:00',dateFmt:'yyyy-MM-dd HH:mm:ss',alwaysUseStartDate:true,readOnly:true});
    });
	
 	function chenckUrl(){
 		var fileUrl = $("#uploadfile").val();  
		if(fileUrl){
			alert("选择图片上传与填写图片网址只能选择一个！");
			$("#advertiseImageUrl").val("");
			return false;
		}
		
		var obj = document.getElementById("advertiseImageUrl");
	    var valueUrl = obj.value;
	    if(valueUrl){
			var  urlStart = valueUrl.indexOf("http://");
			var urlStart2 = valueUrl.indexOf("/");
			if(urlStart==0 || urlStart2==0){
			
		       if(!/\.(gif|jpg|jpeg|png)$/i.test(valueUrl)){
			          alert("图片类型必须是.gif,jpeg,jpg,png中的一种");  
			          $("#advertiseImageUrl").val("");  
			   }		
			}else{
				alert("图片的路径不合格！");
				 $("#advertiseImageUrl").val("");  
			}
	    }
	} 
	
	/* function getFocus(){
		var fileUrl = $("#uploadfile").val();  
		if(fileUrl){
			alert("选择图片上传与填写图片网址只能选择一个！");
			$("#advertiseImageUrl").val("");
			return false;
		}
	} */
	
	function fileChange(imgType) {
		var advertiseImageUrl = $("#advertiseImageUrl").val();
		if(advertiseImageUrl){
			alert("选择图片上传与填写图片网址只能选择一个！");
			$("#uploadfile").val(""); 
			return false;
		}
		if(!/\.(gif|jpg|jpeg|png)$/i.test(imgType.value)){
		          alert("图片类型必须是.gif,jpeg,jpg,png中的一种");  
		          $("#uploadfile").val("");  
		}else{ 
		    var fileSize = 0;  
		    if (!imgType.files) {
		        //var filePath = target.value;
		        var fileSystem = new ActiveXObject("Scripting.FileSystemObject");   
		        var file = fileSystem.GetFile(imgType.value);
		        fileSize = file.Size; alert(fileSize);
		    } else {
		        fileSize = imgType.files[0].size;
		    }

		    if(fileSize == 0 || fileSize >=5120000){
		    	alert("文件大小不能为0，或者大于5MB");
		    	$("#uploadfile").val("");  
		         
		    }
		}

		}
	
	$(document).ready(function(){
		if($.browser.mozilla){
			Metronic.alert({'message':'<span style="color:red;">请使用谷歌或者IE浏览器进行多文件的上传，火狐浏览器暂不支持!</span>'});
		}
		$("#form_advertiseListEdit").validate({
		    rules:{
		    	advertiseName:{  //广告名称长度不能超过 100个字符
		            required:true,
		            maxlength:100
		        },
		        mediaType:{  
		        	required:true,  
		        },
		        adPositionId:{  
		            required:true,         
		        },
		        sortOrder:{
		        	//required:true,
		            digits:true,  
		            range:[0,254],
		        },
		        startDate:{  
		            required:true,  
		        },
		        endDate:{  
		        	required:true,  
		        },

		        advertiseLink:{  //广告链接长度不能超过 200个字符
		           required:true,
		           maxlength:200,
		           url:true,
		        },
		         advertiseImageUrl:{  //或输图片网址 长度不能超过200个字符
		        	 maxlength:200 	
		        }, 
		        uploadfile:{
		        	leastone:["advertiseImageUrl"],
		        }, 
  
		        displayed:{
		            required:true,
		        },    
		        description:{  //广告图片描述 不能超过 300个字符
		            maxlength:300   
		        },
		    },
		    messages:{
		    	advertiseName:{
		            required:"请输广告名称",
		            maxlength:"最大不能超过100个字符"
		        },
		        mediaType:{
		            required:"请选择媒介类型",           
		        },
		        adPositionId:{
		            required:"请选择广告位",           
		        },
                sortOrder:{
		            maxlength:"最大值不能超过254",
		        },
		        startDate:{
		            required:"请选择开始日期",          
		        },
		        endDate:{
		            required:"请选择结束日期",           
		        },
		        advertiseLink:{
		            required:"请输入广告链接",
		            maxlength:"最大不能超过200个字符"
		        },
		       /*  advertiseImageUrl:{
		            required:"请输入广告图片网址或直接选择广告图片",           
		        }, */
		       /*   uploadfile:{
		        	["_advertiseImageUrl"]
		        }, */ 
		        
		       /*  advertiseImageUrl：{
		        	maxlength:"最大不能超过200个字符"
		        }, */
		        displayed:{
		            required:"请选择是否开启该广告",
		        },
		        description:{
		            maxlength:"最大不能超过300个字符"
		        }
		    }
		});

		})
		
	 /*  $.validator.addMethod("leastone",function(value,element,params){
	  var _advertiseImageUrl = params[0]; 
	  return value.length>0 || $("input[name=_advertiseImageUrl]").val().length>0
      },"至少输入");   */
      
    
		
      jQuery.validator.addMethod("leastone", function() {
    	    return $("#uploadfile").val()!="" || $("#advertiseImageUrl").val()!="";  	    
      }, "<div class='col-md-offset-3 col-md-9'>   <font color='#FF0000'>选择上传图片 与 输入图片网址只能一个有值（二选一）</font></div>" );     
      
	KindEditor.ready(function(K) {//在线编辑器
		var editor = K.create('#textarea_content', {
			uploadJson : '/upload/ADVERTISES',
			allowFileManager : false
		});
		editor.clickToolbar('multiimage',function(){
	    	   if($.browser.mozilla){
	    		   editor.hideDialog();
	    		   alert('请使用谷歌或者IE浏览器进行多文件的上传，火狐浏览器暂不支持!');
	    		   return false;
	    	   }
	       });
	});
    
   function checkDate(){
		  var startTime=$("#text_startDate").val();
		  var endTime=$("#text_endDate").val(); 
		  var start=new Date(startTime.replace("-", "/").replace("-", "/"));     
		  var end=new Date(endTime.replace("-", "/").replace("-", "/"));  
		  if(end!=""){
		     if(end<=start){  
		          alert("开始时间要小于结束时间"); 
		          $("#text_startDate").val("");
		          $("#text_endDate").val(""); 
		          return;
			  }	  
		  }
		   	  			 
	  }

	/*]]>*/
</script>